@import url('//cdn.bootcss.com/font-awesome/5.12.1/css/all.min.css');

@import 'base/variables';

@import 'base/grid-basic';
@import 'base/grid-children-layout';
@import 'base/grid-column-count-layout';
@import 'base/grid-offset';

.container {
    position: relative;
}

@media screen and (min-width: 1000px) {
    .container {
        margin: 0 auto;
        max-width: 960px;
        width: 960px;
    }
}

@media screen and (min-width: 1192px) {
    .container {
        max-width: 1152px;
        width: 1152px;
    }
}

@media screen and (min-width: 1384px) {
    .container {
        max-width: 1344px;
        width: 1344px;
    }
}

.qor-auth {
    margin: 120px auto;
    max-width: 400px;
    padding: 32px;
    background: #f4f4f4;
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.1);

    @import 'base/styles-buttons';
    @import 'base/styles-forms';
    @import 'base/styles-helpers';

    @import 'modules/buttons';
    @import 'modules/forms';
    @import 'modules/spacing';
    @import 'modules/lists';

    &.qor-auth-light {
        background: none;
        box-shadow: none;
        max-width: 700px;
        ul {
            margin-top: 40px;
        }
        input[type='text'],
        input[type='email'],
        input[type='password'] {
            background-color: #fff;
            box-shadow: none;
            border-radius: 0;
            border: 0;
            border-bottom: 1px solid #ccc;
            height: 40px;
            font-size: 14px;
            box-shadow: none !important;
            transition: border-bottom 0.3s, border-color 0.3s, border-width 0.3s, border 0.3s ease-in-out;
            line-height: 1;
            &:focus {
                outline: 0;
                border-bottom: 1px solid #33c3f0 !important;
            }
            &:hover {
                border-bottom: 1px solid #333;
            }
        }
        input[type='text'],
        input[type='email'],
        input[type='password'],
        .button {
            width: 50% !important;
        }
    }
    .forgot-password {
        float: right;
        margin-top: -30px;
    }
    h1 {
        font-size: 32px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 4px;
    }
    h2 {
        font-size: 16px;
        margin: 24px 0;
    }
    a.signup-link {
        display: inline-block;
        margin-bottom: 32px;
    }
    input[type='text'],
    input[type='email'],
    input[type='password'] {
        background-color: #fff;
        border: 1px solid #ccc;
        height: 40px;
        font-size: 14px;
        &:invalid {
        }
        &:focus {
            outline: 0;
        }
    }
    .button {
        width: 100%;
        padding: 14px 0;
    }
    label {
        font-size: 14px;
    }
    a {
        font-size: 14px;
    }
    .line {
        margin-top: 24px;
        text-align: center;
        &::after {
            content: '';
            display: block;
            height: 1px;
            margin-top: -13px;
            background-color: #ccc;
        }
        span {
            font-size: 14px;
            margin-top: -10px;
            background-color: #f4f4f4;
            padding: 0 8px;
        }
    }
    .qor-auth-social-login {
        text-align: center;
        margin-top: 32px;
        a {
            display: inline-block;
            margin: 0 6px;
            i {
                display: inline-block;
                width: 32px;
                border-radius: 2px;
                height: 32px;
                font-size: 32px;
                text-align: center;
                color: #fff;
                background-color: #25a5df;
            }
        }
    }
}

@media #{$mobile-media} {
    .qor-auth {
        margin: 0 auto;
        max-width: 100%;
    }
    .qor-auth.qor-auth-light {
        input[type='text'],
        input[type='email'],
        input[type='password'],
        .button {
            width: 100% !important;
        }
    }
}
